<template>
  <div class="questionInfo" v-if="list.length > 0">
    <van-sticky>
      <navBar
        title="刷题"
        rightText="答题卡"
        path="/home/question"
        @clickRight="clickRightEvent"
      ></navBar>
    </van-sticky>
    <div class="comtent" v-if="list[currIndex].detail">
      <div class="title">
        【{{ typeObj[list[currIndex].detail.type] }}】{{
          list[currIndex].detail.title
        }}
      </div>
      <div class="tag">
        <van-tag
          color="#f7f4f5"
          text-color="#c7c6cc"
          class="tag-item"
          v-for="(item, index) in list[currIndex].detail.tag"
          :key="index"
          >{{ item }}</van-tag
        >
      </div>
      <!-- 单选 -->
      <div class="select" v-if="list[currIndex].detail.type === 1">
        <div
          class="select-item"
          v-for="(item, index) in list[currIndex].detail.option"
          :key="index"
          :class="{
            active: ans1 === str[index],
            success: answer1Success(index),
            error: answer1Error(index),
          }"
          @click="ans1Click(index)"
        >
          {{ str[index] }}. {{ item }}
        </div>
      </div>
      <!-- 多选 -->
      <div class="select" v-else-if="list[currIndex].detail.type === 2">
        <div
          class="select-item"
          v-for="(item, index) in list[currIndex].detail.option"
          :key="index"
          :class="{
            active: ans2.includes(str[index]),
            success: answer2Success(index),
          }"
          @click="ans2Click(index)"
        >
          {{ str[index] }}. {{ item }}
        </div>
      </div>
      <!-- 简答 -->
      <div class="select" v-else>
        <van-field
          class="field"
          v-model="ans3"
          type="textarea"
          rows="6"
          @input="ans3Event"
          :disabled="step >= 2"
          placeholder="请在此处作答"
        ></van-field>
      </div>
      <!-- 答案解析 -->
      <div class="answer" v-if="step > 1">
        <h3 class="a1">答案解析</h3>
        <div class="a2" v-if="list[currIndex].detail.type === 1">
          正确答案: {{ list[currIndex].answer.singleAnswer }}
        </div>
        <div class="a2" v-else-if="list[currIndex].detail.type === 2">
          正确答案: {{ list[currIndex].answer.multipleAnswer }}
        </div>
        <div class="a2" v-else>正确答案:</div>
        <div class="a3">
          <div class="a3-1">
            难度: {{ diffObj[list[currIndex].answer.difficulty] }}
          </div>
          <div class="a3-2">
            提交次数: {{ list[currIndex].answer.submitNum }}
          </div>
          <div class="a3-3">
            正确次数: {{ list[currIndex].answer.correctNum }}
          </div>
        </div>
        <div class="a4">
          {{ list[currIndex].answer.answerAnalysis }}
        </div>
      </div>
      <div class="footer">
        <div class="f1">
          <div class="f1-top iconfont">&#xe649;</div>
          <div class="f1-bootom">收藏</div>
        </div>
        <div class="f1">
          <div class="f1-top iconfont">&#xe606;</div>
          <div class="f1-bootom">反馈</div>
        </div>
        <div class="f2">
          <span>{{ currIndex + 1 }}</span
          >/{{ list.length }}题
        </div>
        <div class="f3">
          <van-button
            color="red"
            class="btn"
            v-if="step < 2"
            :disabled="step == 0"
            @click="submit"
            >提交</van-button
          >
          <van-button
            color="red"
            class="btn"
            v-else-if="step === 2"
            @click="next"
            >下一题</van-button
          >
          <van-button
            color="red"
            class="btn"
            v-else
            @click="$router.push('/home/question')"
            >结束</van-button
          >
        </div>
      </div>
      <van-popup v-model="isShow" position="bottom">
        <ul class="card">
          <li
            class="card-item"
            v-for="(item, index) in list"
            :key="index"
            :class="{
              'card-success': item.answer && item.answer.isRight,
              'card-error': item.answer && !item.answer.isRight,
            }"
            @click="skip(index)"
          >
            {{ index + 1 }}
          </li>
          <li class="noUse"></li>
          <li class="noUse"></li>
          <li class="noUse"></li>
          <li class="noUse"></li>
          <li class="noUse"></li>
          <li class="noUse"></li>
          <li class="noUse"></li>
        </ul>
      </van-popup>
    </div>
  </div>
</template>

<script>
import {
  interviewQuestions,
  questionsSubmit,
  questionsInfo,
} from "@/api/question";
export default {
  data() {
    return {
      type: this.$route.query.type,
      city: this.$route.query.city,
      list: [],
      currIndex: 0,
      typeObj: {
        1: "单选",
        2: "多选",
        3: "简答",
      },
      diffObj: {
        1: "简单",
        2: "一般",
        3: "困难",
      },
      str: "ABCDEFG",
      ans1: "",
      ans2: [],
      ans3: "",
      step: 0, // 0--获取题目 但没有答题  1--已答题 但还没有提交  2--已提交，但不是最后一题  3--已提交，且是最后一题
      isShow: false,
    };
  },
  computed: {
    answer1Error() {
      return function (index) {
        return (
          this.list[this.currIndex].answer &&
          !this.list[this.currIndex].answer.isRight &&
          this.ans1 === this.str[index]
        );
      };
    },
    answer1Success() {
      return function (index) {
        return (
          this.list[this.currIndex].answer &&
          this.list[this.currIndex].answer.singleAnswer === this.str[index]
        );
      };
    },
    answer2Success() {
      return function (index) {
        return (
          this.list[this.currIndex].answer &&
          this.list[this.currIndex].answer.multipleAnswer.includes(
            this.str[index]
          )
        );
      };
    },
  },
  created() {
    interviewQuestions({
      type: this.type,
      city: this.city,
    }).then((res) => {
      window.console.log("题目数据:", res);
      this.list = res.data.data;
    });
  },
  methods: {
    // 单选点击
    ans1Click(index) {
      if (this.step < 2) {
        this.ans1 = this.str[index];
        this.step = 1;
      }
    },
    // 多选点击
    ans2Click(index) {
      if (this.step < 2) {
        if (this.ans2.includes(this.str[index])) {
          const _index = this.ans2.indexOf(this.str[index]);
          this.ans2.splice(_index, 1);
        } else {
          this.ans2.push(this.str[index]);
        }
        if (this.ans2.length > 0) {
          this.step = 1;
        } else {
          this.step = 0;
        }
      }
    },
    ans3Event() {
      if (this.ans3.length > 0) {
        this.step = 1;
      } else {
        this.step = 0;
      }
    },
    // 提交答案
    submit() {
      questionsSubmit({
        id: this.list[this.currIndex].id,
        singleAnswer: this.ans1,
        multipleAnswer: this.ans2,
      }).then((res) => {
        if (this.list.length === this.currIndex + 1) {
          this.step = 3;
        } else {
          this.step = 2;
        }
        this.list[this.currIndex].answer = res.data.data;
        window.console.log(this.list[this.currIndex]);
        window.console.log("提交答案:", res);
      });
    },
    // 下一题
    next() {
      this.step = 0;
      this.ans1 = "";
      this.ans2 = [];
      this.ans3 = "";
      this.currIndex++;
      questionsInfo(this.list[this.currIndex].id).then((res) => {
        this.$set(this.list[this.currIndex], "detail", res.data.data);
      });
    },
    // 答题卡
    clickRightEvent() {
      this.isShow = true;
    },
    // 答题卡跳转
    skip(index) {
      this.isShow = false;
      this.ans1 = "";
      this.ans2 = [];
      this.ans3 = "";
      this.currIndex = index;
      // 没有题目
      if (!this.list[index].detail) {
        this.step = 0;
        questionsInfo(this.list[this.currIndex].id).then((res) => {
          this.$set(this.list[this.currIndex], "detail", res.data.data);
        });
      } else {
        // 有题目有答案
        // 最后一题 step = 3 不是最后一题 step = 2
        if (this.list.length == index + 1) {
          this.step = 3;
        } else {
          this.step = 2;
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
.questionInfo {
  .comtent {
    padding: 0 15px 120px;
    .title {
      font-size: 16px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: justify;
      color: #181a39;
      line-height: 22px;
      padding-top: 25px;
    }
    .tag {
      margin-top: 10px;
      font-size: 12px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: left;
      color: #b4b4bd;
      line-height: 16px;
      letter-spacing: 0px;
      .tag-item {
        margin-right: 12px;
      }
    }
    .select {
      margin-top: 28px;
      .select-item {
        width: 100%;
        // height: 50px;
        // line-height: 50px;
        margin-bottom: 16px;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 400;
        text-align: justify;
        color: #181a39;
        padding: 15px;
        border: 2px solid #b5b5bd;
      }
      .active {
        border: 2px solid #b8b8c1;
        background-color: #f2f2f2;
      }
      .success {
        background-color: #ddfad9;
        color: #4ad38f;
      }
      .error {
        background-color: #ffefea;
      }
      .field {
        background-color: #f7f4f5;
      }
    }
    .answer {
      border-top: 1px solid #eceaea;
      padding-top: 18px;
      .a1 {
        font-size: 18px;
        font-weight: 600;
        text-align: left;
        color: #222222;
        line-height: 25px;
        letter-spacing: 0px;
      }
      .a2 {
        font-size: 16px;
        font-weight: 600;
        text-align: justify;
        color: #1dc779;
        line-height: 22px;
        margin: 18px 0;
      }
      .a3 {
        background: #f7f4f5;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 12px;
        color: #545671;
        line-height: 16px;
        padding: 10px;
      }
      .a4 {
        margin-top: 20px;
        font-size: 16px;
        text-align: justify;
        color: #181a39;
        line-height: 22px;
      }
    }
    .footer {
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 80px;
      padding: 15px;
      display: flex;
      align-items: center;
      text-align: center;
      font-size: 12px;
      color: #d5d5da;
      background-color: #fff;
      .f1 {
        flex: 1;
        .f1-top {
          font-size: 28px;
        }
      }
      .f2 {
        flex: 2;
        font-size: 14px;
        color: #545671;
        span {
          color: #e40137;
          font-size: 18px;
        }
      }
      .f3 {
        flex: 2;
        .btn {
          width: 98px;
          height: 40px;
          background: #e40137;
          border-radius: 14px;
          color: #fff;
        }
      }
    }
    .card {
      padding: @p15;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .card-item {
        width: 33px;
        height: 33px;
        border-radius: 50%;
        margin: 5px 8px;
        border: 1px solid #b4b4bd;
        font-size: 14px;
        text-align: center;
        color: #b4b4bd;
        line-height: 33px;
      }
      .noUse {
        width: 33px;
        height: 0px;
        margin: 5px 8px;
      }
      .card-success {
        background-color: #ddfad9;
        color: #77dea6;
      }
      .card-error {
        background-color: #ffefea;
        color: #ff4949;
      }
    }
  }
}
</style>